<template>
    <div class="build-con" @click.self="handleWrapperClick" :style="{height:`${contentHeight}px`}">
      <div class="building_shadow"
           :style="{left:`${pointerInfo.xcoord > bgSize. wide/ 2 ? Number(pointerInfo.xcoord/bgSize.wide*innerWidth) - 762 : Number(pointerInfo.xcoord/bgSize.wide*innerWidth) + 200 }px`,top:`${(Number(pointerInfo.ycoord/bgSize.height*(contentHeight-40))+20) > contentHeight-558-210 ? (contentHeight-558-210 > 0 ? contentHeight-558-210 : 0) : (Number(pointerInfo.ycoord/bgSize.height*(contentHeight-40))+20) }px`}">
        <div class="building_info" >
          <div class="until_title">{{pointerInfo.buildingName}}，{{pointerInfo.sectionName}}</div>
          <div class="nodeco deco" v-if="buildingDetailInfo.decorationStandard == '毛坯'"></div>
          <div class="ishaodeco deco" v-else-if="buildingDetailInfo.decorationStandard == '豪装'"></div>
          <div class="isdeco deco" v-else-if="buildingDetailInfo.decorationStandard == '精装'"></div>
          <div style="padding: 20px 0px" class="clear">
            <div class="building_detail_info left">
              <div class="detail_info_left">
                <div class="info_item">
                  <i class="iconfont icon-gongren"></i>
                  <span>楼栋长:</span>
                  <span class="info_con">{{buildingDetailInfo.buildingLeader}}</span>
                </div>
                <div class="info_item">
                  <i class="iconfont icon-chouse"></i>
                  <span>产品类型:</span>
                  <span class="info_con">{{buildingDetailInfo.productType}}</span>
                </div>
                <div class="info_item">
                  <i class="iconfont icon-louceng"></i>
                  <span>楼层数:</span>
                  <span class="info_con">{{buildingDetailInfo.buildingTier}}</span>
                </div>
                <div class="info_item">
                  <i class="iconfont icon-mianji"></i>
                  <span>地上面积:</span>
                  <span class="info_con" v-if="buildingDetailInfo.overgroundArea">{{buildingDetailInfo.overgroundArea}}㎡</span>
                  <span class="info_con" v-else >--㎡</span>
                </div>
              </div>
            </div>
            <div class="left building_line"></div>
            <div class="building_detail_info left">
              <div class="info_item">
                <i class="iconfont icon-jianlidanwei"></i>
                <span>监理工程师:</span>
                <span class="info_con">{{buildingDetailInfo.supervisingEnginer}}</span>
              </div>
              <div class="info_item">
                <i class="iconfont icon-hushu"></i>
                <span>套数(户数):</span>
                <span class="info_con">{{buildingDetailInfo.households}}</span>
              </div>
              <div class="info_item">
                <i class="iconfont icon-zu"></i>
                <span>标准层高:</span>
                <span class="info_con">{{buildingDetailInfo.standardHigh}}m</span>
              </div>
              <div class="info_item">
                <i class="iconfont icon-mianji"></i>
                <span>地下面积:</span>
                <span class="info_con" v-if="buildingDetailInfo.undergroundArea">{{buildingDetailInfo.undergroundArea}}㎡</span>
                <span class="info_con" v-else >--㎡</span>
              </div>
            </div>
          </div>
          <div class="until_title">进度计划</div>
          <div class="process_plan clear">
            <div class="process_plan_item left" v-for="(item, index) in buildingDetailInfo.nodes">
              <i class="pano-ellipse" ></i>
              <span>{{item.nodeName}}:</span>
              <span class="plan_item_date">{{item.startTime}}</span>
            </div>
          </div>
          <div class="process_state">
            <i class="iconfont icon-yuanjiaojuxingkaobei"></i>
            <span>进度状态:</span>
            <span class="state_des">【{{buildingDetailInfo.constructionPhase}}】阶段完成
              <span>{{buildingDetailInfo.completePercent}}%</span>，进度{{buildingDetailInfo.constructionStatus}}</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import mixin from './mixin'
    export default {
      name: 'building_info',
      data () {
        return {
          buildingDetailInfo: {
            decorationStandard: '',
            buildingLeader: '',
            buildingName: '',
            buildingTier: '',
            productType: '',
            overgroundArea: '',
            supervisingEnginer: '',
            households: '',
            standardHigh: '',
            undergroundArea: '',
            completePercent: ''
          }
        }
      },
      props: {
        pointerInfo: {
        },
        BuildingDetailInfoArray: {
        },
        bgSize: {
        },
        highLightIndex: 0,
        panoramaId: ''
      },
      mixins: [mixin],
      computed: {
        ...mapGetters({
          currentUser: 'currentUser'
        })
      },
      watch: {
        pointerInfo () {
          // this.getBuildingDetailInfo()
          this.buildingDetailInfo = this.BuildingDetailInfoArray[this.highLightIndex]
        }
      },
      mounted () {
        this.getBuildingDetailInfo()
      },
      methods: {
        handleWrapperClick () {
          this.close()
        },
        close () {
          this.$emit('close')
        },
        getBuildingDetailInfo () {
          if (this.pointerInfo) {
            let data = {
              buildingId: this.pointerInfo.buildingId,
              pjId: this.currentUser.pjId,
              stageId: this.currentUser.stageId,
              panoramaId: this.panoramaId
            }
            this.$axios({
              method: 'post',
              url: `${this.$site.videoServer}/api/panorama/getBuildingDetailInfo`,
              data: this.$qs.stringify(data)
            }).then(res => {
              if (!res.data.data) return
              this.buildingDetailInfo = res.data.data
              this.buildingDetailInfo.nodes.forEach((item) => {
                if (!item.startTime) {
                  item.startTime = ''
                  return
                }
                item.startTime = this.$moment(item.startTime).get('year') + '.' + (this.$moment(item.startTime).get('month') + 1) + '.' + this.$moment(item.startTime).get('date')
              })
            })
          }
        }
      }
    }
</script>

<style scoped lang="scss">
  .build-con{
    position: absolute;
    width: 100%;
    min-width: 1920px;
    // height: 100%;
    top: 94px;
    left:0;
    display: flex;
    // align-items: center;
    // padding-top: 214px;
    justify-content: center;
    .building_shadow {
      position: absolute;
      width: 762px;
      height: 488px;
      padding: 20px;
      box-sizing: border-box;
      border-radius:3px;
      box-shadow: 0 0 20px 5px rgba(0, 107, 167, 0.35) inset;
    }
    .building_info{
      width: 722px;
      height: 448px;
      border-radius:3px;
      box-sizing: border-box;
      box-shadow: 0 0 20px 5px rgba(71, 159, 205, 0.35) inset;
      background: rgba(6, 60, 87, 0.9);
      .until_title{
        background: url(/static/images/bgy-map-title.png) no-repeat;
        height: 43px;
        line-height: 43px;
        font-size: 20px;
        color: #cfe2e2;
        padding-left: 20px;
        transform: translate(0,0);
      }
      .deco {
        width: 86px;
        height: 84px;
        position: absolute;
        top: 20px;
        right: 20px;
      }
      .isdeco {
        background: url(/static/images/bgy-deco.png) no-repeat;
      }
      .ishaodeco {
        background: url(/static/images/bgy-haodeco.png) no-repeat;
      }
      .nodeco {
        background: url(/static/images/bgy-no-deco.png) no-repeat;
      }
      .building_detail_info {
        .iconfont {
          font-size: 20px;
        }
        width: 49.8%;
        padding: 0px 30px;
        box-sizing: border-box;
        .info_item {
          padding: 10px 0;
          color: #34cddd;
          font-size: 20px;
          .info_con {
            padding-left: 5px;
            color: #a9c5ec;
          }
        }
      }
      .building_line {
        background: url("/static/images/bgy-buildingInfo-line.png") no-repeat;
        width: 1px;
        height: 175px;

      }
      .process_plan{
        padding: 20px 30px 10px;
        font-size: 20px;
        color: #30bece;
        .process_plan_item {
          width: 33%;
          .pano-ellipse {
            background: url("/static/images/bgy-pano-ellipse.png");
            width: 22px;
            height: 22px;
            display: inline-block;
            vertical-align: sub;
          }
          .plan_item_date{
            color: #a9c5ec;
            padding-left: 5px;
          }
        }
      }
      .process_state {
        padding: 10px 30px 10px;
        font-size: 20px;
        color: #30bece;
        .state_des{
          color: #a9c5ec;
          padding-left: 5px;
        }
      }
    }
  }

</style>
